<template>
  <div>
    <Row>
      <Card>
        <p slot="title">
          <Icon type="navicon-round"></Icon>
          缴费明细
        </p>
        <VmBtable type="edit" ref="VmBtable"
                  :columns="dataColumns"
                  :data="dataTable"
                  :searchparam="searchParam"
                  :downTemplate="false"
                  :addBtn="false"
                  :importBtn="false"
                  :batchDelBtn="false"
                  v-on:searchFn="searchFn"
                  v-on:page-change="pageChangeFn"
                  placeholder="家长名称关键词"
                  searchText="缴费家长："
                  cleanText="刷新"
                  :operate="operate"
                  v-on:exportFn="exportFn"
                  v-on:restFn="restFn">
          <div slot="search" class="db_inline">
            <Select v-model="searchParam.kindergartenId" @on-change="queryFn" style="width:200px">
              <Option v-for="item in kindergartenList" :value="item.id" :key="item.id">{{ item.name }}</Option>
            </Select>
            时间段
            <DatePicker type="date" v-model="searchParam.startTime" @on-change="searchParam.startTime=$event" placeholder="开始时间" style="width: 130px"></DatePicker>至
            <DatePicker type="date" v-model="searchParam.endTime" @on-change="searchParam.endTime=$event" placeholder="结束时间" style="width: 130px"></DatePicker>
          </div>
        </VmBtable>
      </Card>
    </Row>
  </div>
</template>

<script>
  import API from "@/api/api";
  import VmBtable from "@/components/vm/vm-btable";
  export default {
    components: {
      VmBtable
    },
    data() {
      return {
        searchParam: {
          current: 1,
          size: 20,
          total: 0,
          kinsfolkName: '',
          kindergartenId:null,
          startTime:'',
          endTime:'',
        },
        dataColumns: [
          {
            title: '序号',
            type: 'index',
            align: 'center',
            width: 100
          },
          {
            title:'幼儿园',
            key:'kindergartenName',
            align: 'center',
            width:220
          },
          {
            title:'缴费家长',
            key:'kinsfolkName',
            align: 'center',
            width:100
          },
          {
            title:'缴费金额(元)',
            key:'totalFee',
            width:150,
            align: 'center',
            render:(h,param)=>{
              return h('div',{},param.row.totalFee/100)
            }
          },
          {
            title:'交易订单号',
            key:'transactionId',
            align: 'center',
            width:250,
          },
          {
            title:'所选套餐',
            key:'meal',
            align: 'center',
          },
          {
            title:'缴费时间',
            key:'timeEnd',
            align: 'center',
            sortable:true,
            sortType:'desc',
            width:200
          },
        ],
        operate: [],
        dataTable: [],
        kindergartenList:[],
      };
    },
    methods: {
      exportFn(){
        this.$Modal.confirm({
          title:'提示',
          content:'是否导出符合筛选条件的数据？',
          onOk:()=>{
            API.exportOrder(this.searchParam);
          },
          onCancel:()=>{

          }
        });
      },
      restFn() {
        this.searchParam.current = 1;
        this.searchParam.size = 20;
        this.searchParam.kindergartenId = null;
        this.searchParam.kinsfolkName = '';
        this.searchParam.startTime = '';
        this.searchParam.endTime = '';
        this.queryFn();
      },
      queryFn() {
        API.fetchOrder(this.searchParam).then(
          res => {
            let data = res.data;
            this.dataTable = data.records;
            this.searchParam.total = data.total;
          },
          error => {
            this.$Message.info(error.msg);
          }
        );
      },
      fetchKindergartenList(){
        API.fetchKindergartenList().then(resp=>{
          this.kindergartenList=resp.data;
        })
      },
      complete() {
        Object.assign(this.modal, {
          visible: false,
          title: '',
          loading: false,
        });
        this.$refs.Form.resetFields();
      },
      pageChangeFn(current) {
        this.searchParam.current = current;
        this.queryFn();
      },
      searchFn(value) {
        this.searchParam.kinsfolkName = value;
        console.log(this.searchParam)
        this.queryFn();
      },
    },
    created() {
    },
    mounted() {
      this.queryFn();
      this.fetchKindergartenList();
    }
  }
</script>

<style scoped>

</style>
